<template>
  <div class="contain">
    <p>
      <span style="padding-right: 20px">选择品牌</span>
      <el-select v-model="brand" filterable clearable placeholder="请选择品牌">
        <el-option
          v-for="item in brandArrs"
          :key="item.brandId"
          :label="item.brandName"
          :value="item.brandId"
        >
        </el-option>
      </el-select>
      <el-button
        style="margin-left: 50px"
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="getDemandCustomerList"
        >搜索</el-button
      >
    </p>
    <el-button
      v-hasPermi="['customerData:dataList:download']"
      style="float: right; margin-bottom: 30px; margin-right: 50px"
      type="primary"
      size="small"
      icon="el-icon-download"
      @click="download"
      >下载</el-button
    >
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="name" label="姓名" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="手机号" align="center">
      </el-table-column>
      <el-table-column prop="brand" label="品牌" align="center">
      </el-table-column>
      <el-table-column prop="serial" label="车型" align="center">
      </el-table-column>
      <el-table-column prop="city" label="城市" align="center">
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      :pageCount="5"
      @pagination="getDemandCustomerList"
    />
  </div>
</template>

<script>
import {
  queryDemandCustomerDataList,
  queryAllCarBrandList,
  downloadDemandCustomerData,
} from "@/api/customerData/customerData.js";
export default {
  data() {
    return {
      brand: "",
      brandArrs: [],
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      flag: false,
      loading: false,
      brandName: "",
    };
  },
  created() {
    this.getAllCarBrandList();
    this.getDemandCustomerList();
    this.flag = false;
  },
  methods: {
    getDemandCustomerList() {
      this.loading = true;
      queryDemandCustomerDataList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        brandId: this.brand,
      })
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            this.total = res.data.total;
            this.tableData = res.data.list;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    download() {
      this.brandName = "";
      if (this.brand && this.brand != "") {
        for (let i = 0; i < this.brandArrs.length; i++) {
          if (this.brand == this.brandArrs[i].brandId) {
            this.brandName = this.brandArrs[i].brandName;
          }
        }
      }
      let msg1 = this.brandName ? this.brandName + "品牌的" : "";
      let msg =
        "将下载" +
        msg1 +
        "数据,每次下载数据最多500条,下载后不可重复下载，请谨慎操作!";
      const h = this.$createElement;
      this.$msgbox({
        title: "提示",
        message: h("p", null, [h("span", null, msg)]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            if (this.flag) {
              this.$message.warning("请尝试重新刷新页面");
              return;
            }
            const loading = this.$loading({
              lock: true,
              text: "Loading",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)",
            });
            downloadDemandCustomerData({
              brandId: this.brand,
            })
              .then((res) => {
                loading.close();
                let that = this;
                if (res.type && res.type == "application/json") {
                  let reader = new FileReader();
                  reader.onload = function () {
                    let { msg } = JSON.parse(reader.result);
                    that.$message({
                      message: msg,
                      type: "warning",
                    });
                  };
                  reader.readAsText(res, "utf-8");
                } else {
                  this.flag = true;
                  let blob = new Blob([res], {
                    type: "application/json",
                  });
                  let downloadElement = document.createElement("a");
                  let href = window.URL.createObjectURL(blob); //创建下载的链接
                  downloadElement.href = href;
                  downloadElement.download = "数据" + ".xlsx";
                  document.body.appendChild(downloadElement);
                  downloadElement.click();
                  document.body.removeChild(downloadElement);
                  window.URL.revokeObjectURL(href);
                  this.getDemandCustomerList();
                }
              })
              .catch(() => {
                loading.close();
              });
          } else {
            this.flag = false;
            done();
          }
        },
      }).then((action) => {
        this.flag = false;
        // loading.close();
      });
      // this.$confirm("确认下载, 是否继续?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(() => {
      //     if (this.flag) {
      //       this.$message.warning("请尝试重新刷新页面");
      //       return;
      //     }
      //     const loading = this.$loading({
      //       lock: true,
      //       text: "Loading",
      //       spinner: "el-icon-loading",
      //       background: "rgba(0, 0, 0, 0.7)",
      //     });
      //     downloadDemandCustomerData({
      //       brandId: this.brand,
      //     })
      //       .then((res) => {
      //         loading.close();
      //         let that = this;
      //         if (res.type && res.type == "application/json") {
      //           let reader = new FileReader();
      //           reader.onload = function () {
      //             let { msg } = JSON.parse(reader.result);
      //             that.$message({
      //               message: msg,
      //               type: "warning",
      //             });
      //           };
      //           reader.readAsText(res, "utf-8");
      //         } else {
      //           this.flag = true;
      //           let blob = new Blob([res], {
      //             type: "application/json",
      //           });
      //           let downloadElement = document.createElement("a");
      //           let href = window.URL.createObjectURL(blob); //创建下载的链接
      //           downloadElement.href = href;
      //           downloadElement.download = "数据" + ".xlsx";
      //           document.body.appendChild(downloadElement);
      //           downloadElement.click();
      //           document.body.removeChild(downloadElement);
      //           window.URL.revokeObjectURL(href);
      //           this.getDemandCustomerList();
      //         }
      //       })
      //       .catch(() => {
      //         loading.close();
      //       });
      //   })
      //   .catch(() => {});
    },
    getAllCarBrandList() {
      queryAllCarBrandList().then((res) => {
        if (res.code == 200) {
          this.brandArrs = res.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.contain {
  padding: 30px;
}
</style>